<template>
  <div class="p10">
    <el-card>
      <div>
        <!-- 日历头部div -->
        <div class="fc-toolbar" style="display: flex; margin-bottom: 2px">
          <!-- 日历头部左侧显示区域 -->
          <!-- 日历头部中间显示区域 -->
          <div class="fc-center" style="display: flex; flex: 3; justify-content: center">
            <el-button-group>
              <el-button icon="el-icon-d-arrow-left" @click="getPrevYear" class="fc_btns"></el-button>
              <el-button icon="el-icon-arrow-left" @click="getPrev" class="fc_btns"></el-button>
            </el-button-group>
            <h2 class="title">{{ title }}</h2>
            <el-button-group>
              <el-button icon="el-icon-arrow-right" @click="getNext" class="fc_btns"></el-button>
              <el-button icon="el-icon-d-arrow-right" @click="getNextYear" class="fc_btns"></el-button>
            </el-button-group>
          </div>

          <!-- 日历头部右侧显示区域 -->
          <div class="fc-right">
            <el-button-group>
              <el-button @click="today" type="success" plain size="medium" class="fc_btns">今天</el-button>
              <el-button @click="month" type="primary" plain size="medium" class="fc_btns">月</el-button>
              <el-button @click="week" type="primary" plain size="medium" class="fc_btns">周</el-button>
              <el-button @click="day" type="primary" plain size="medium" class="fc_btns">日</el-button>
              <el-button @click="list" type="primary" plain size="medium" class="fc_btns">列表</el-button>
            </el-button-group>
          </div>
        </div>
      </div>
      <!-- 日历本体 -->
      <el-row class="mt10">
        <el-col :md="24" :xs="24">
          <div style="margin-top: 0px">
            <FullCalendar class="calendar" ref="fullCalendar" :options="calendarOptions">
              <template v-slot:eventContent="arg">
                <el-popover
                  :append-to-body="true"
                  ref="popover1"
                  placement="top-start"
                  width="220"
                  :visible-arrow="true"
                  trigger="hover"
                  :teleported="false"
                  popper-class="popover"
                  :open-delay="100"
                  @show="showPic(arg)"
                  @hide="popoverPicReset(arg)"
                >
                  <el-row class="popover_title">
                    <el-col
                      :span="12"
                      :style="{
                        color:
                          arg.event.extendedProps.scheduleStatus == false
                            ? 'green'
                            : 'red',
                      }"
                    >
                      <span
                        style="padding-right: 2px"
                        :style="{
                          'border-left':
                            arg.event.extendedProps.scheduleStatus == false
                              ? '5px solid green'
                              : '5px solid red',
                        }"
                      ></span>
                      {{
                      arg.event.extendedProps.scheduleStatus == false
                      ? "已完成"
                      : "进行中"
                      }}
                    </el-col>
                    <el-col
                      :span="12"
                      style="
                        display: flex;
                        flex-direction: row-reverse;
                        font-size: 14;
                        color: #000;
                      "
                    >
                      {{
                      arg.event.allDay == true
                      ? "全天"
                      : formatTimer(arg.event.start)
                      }}
                    </el-col>
                  </el-row>

                  <el-row style="margin-top: 5px">
                    <el-col style="width: 15%">
                      <div>
                        <el-button
                          class="hvr-icon-pulse-grow"
                          :popperAppendToBody="false"
                          size="mini"
                          icon="el-icon-edit hvr-icon"
                          type="primary"
                          circle
                          @click="handleEventClick(arg)"
                        ></el-button>
                      </div>
                    </el-col>
                    <!-- <el-col style="width: 15%">
                      <el-button
                        class="hvr-icon-bounce"
                        size="mini"
                        type="success"
                        icon="el-icon-document-checked hvr-icon"
                        circle
                        @click="onCheckBtnClicked(arg)"
                      ></el-button>
                    </el-col>-->
                    <el-col style="width: 15%">
                      <el-popconfirm
                        confirm-button-text="好"
                        cancel-button-text="否"
                        icon="el-icon-info"
                        icon-color="red"
                        title="确定删除这个待办日程吗？"
                        @confirm="onRemoveBtnClicked(arg)"
                      >
                        <el-button
                          class="hvr-icon-buzz-out"
                          slot="reference"
                          size="mini"
                          type="danger"
                          icon="el-icon-delete hvr-icon"
                          circle
                        ></el-button>
                      </el-popconfirm>
                    </el-col>
                  </el-row>
                  <div slot="reference">
                    <span class="tree_span_text">{{ arg.timeText }}</span>
                    <span>{{ arg.event.title }}</span>
                  </div>
                </el-popover>
              </template>
            </FullCalendar>
          </div>
          <!-- 事件添加或修改对话框 -->
          <el-dialog
            :visible.sync="dialogVisible"
            :popperAppendToBody="false"
            @close="cancel"
            v-dialogDrag
            :close-on-click-modal="false"
            class="calendar_matters"
          >
            <div slot="title" class="header-title" :style="{ color: 'black' }">
              <i class="el-icon-edit"></i>
              <span>&nbsp;待办日程</span>
            </div>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="日程标题" prop="scheduleTitle">
                    <el-input
                      placeholder="请填写日程标题"
                      v-model="form.scheduleTitle"
                      class="calendar_details"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" :xs="24">
                  <el-form-item label="日程时间">
                    <div class="dateRange">
                      <el-date-picker
                        v-model="dateRange"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
              </el-row>
              <el-row>
                <el-form-item label="紧急程度" prop="urgent">
                  <el-select v-model="form.urgent" placeholder="请选择">
                    <el-option label="!!!重要紧急" value="!!!重要紧急"></el-option>
                    <el-option label="!!重要不紧急" value="!!重要不紧急"></el-option>
                    <el-option label="!紧急不重要" value="!紧急不重要"></el-option>
                    <el-option label="-不紧急不重要" value="-不紧急不重要"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-form-item label="附件" prop="file">
                <fileUpload v-model="form.file" />
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="日程描述" prop="scheduleDesc">
                    <el-input
                      placeholder="请填写日程描述"
                      v-model="form.scheduleDesc"
                      type="textarea"
                      class="calendar_details"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="参与人" prop="participantList">
                <el-cascader
                  :show-all-levels="false"
                  ref="subject"
                  v-model="form.participantList"
                  :options="subjectList"
                  :props="supplierSubjectsIdProps"
                  placeholder="请选择参与人"
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
  
  <script>
import {
  scheduleAdd,
  scheduleDel,
  scheduleEdit,
  scheduleList
} from "@/api/reportTm/schedule";
import { deptUserTree } from "@/api/reportTm";
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
// import tippy from "tippy.js";
import Treeselect from "@riophae/vue-treeselect"; // Treeselect插件
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; //
export default {
  // 注册局部组件
  components: {
    FullCalendar,
    Treeselect,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer")
  },
  data() {
    return {
      supplierSubjectsIdProps: {
        multiple: true,
        label: "label",
        value: "id",
        children: "children"
      },
      subjectList: [],
      rules: {
        participantList: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        scheduleTitle: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ]
      },
      // 表单是否显示
      dialogVisible: false,
      // 表单标题栏
      title: "事件",
      // 表单当前编辑模式设置，add或amend
      form_edited_state: "",
      // 表单内容设置项
      form: {
        scheduleTitle: undefined,
        urgent: "",
        participantList: [],
        file: ""
      },
      // 表单日期设置
      dateRange: [],
      // 图片预览的操作按钮是否展示
      disabled: false,
      // 图片是否显示
      img_dialogVisible: false,
      // 预览图片地址
      dialogImageUrl: "",
      // el-popover弹出框标题内容
      popover_title: "待办日程",
      // el-popover图片地址存放
      popoverimg: [],
      // 附件地址存放
      filelist: [],
      // Fullcalendar版本@5.11.3日历控件设置项，官网文档地址：https://fullcalendar.io/
      calendarOptions: {
        // visibleRange: { start: "2021-09-01", end: "2022-10-01" }, // 可视化区间
        // validRange: { start: "2021-09-01", end: "2021-09-01" }, // 可展示区间
        // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        initialView: "dayGridMonth", // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        locale: "zh-cn", // 切换语言，当前为中文
        allDaySlot: true, // 不显示all-day
        businessHours: true, //
        handleWindowResize: true, // 是否随浏览器窗口大小变化而自动变化。
        allDayText: "全天", // 设置all-Day显示的文字，不设置的话默认显示"all-Day"
        themeSystem: "bootstrap", // 主题色(本地测试未能生效)
        // loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
        // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
        // eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
        allowContextMenu: false,
        editable: true, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
        eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        selectMinDistance: 0, // 选中日历格的最小距离
        // eventLimit: true, //数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数
        moreLinkContent: "+ 更多", //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义
        // dayPopoverFormat: "YYYY-M-d",
        dayMaxEventRows: true, // 日历显示事件最大条数，for all non-TimeGrid views
        weekends: true, //
        navLinks: true, // 天链接
        selectHelper: false,
        slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
        aspectRatio: 1.35, //设置日历单元格宽度与高度的比例。
        expandRows: true,
        height: 800,
        contentHeight: 100,
        nowIndicator: true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
        weekMode: "fixed", //在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定
        weekNumbers: true, //是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
        weekText: "周",
        customButtons: {
          //自定义按钮
          getToday: {
            text: "今天",
            click: this.getToday
          },
          getNext: {
            text: ">",
            click: this.getNext
          },
          getPrev: {
            text: "<",
            click: this.getPrev
          },
          getPrevYear: {
            text: "<<",
            click: this.getPrevYear
          },
          getNextYear: {
            text: ">>",
            click: this.getNextYear
          },
          customButton: {
            text: "今日标记全部已完成",
            click: this.customButton
          },
          customButton1: {
            text: "显示未完成",
            click: this.customButton
          }
        },
        // 日历头部按钮，即Fullcalendar表头显示区域
        // headerToolbar: {
        //   left: "getPrevYear,getPrev,getToday,getNext,getNextYear", //"getPrevYear,getPrev,getToday,getNext,getNextYear customButton,customButton1",
        //   center: "title",
        //   right:
        //     "customButton customButton1 dayGridMonth,timeGridWeek,timeGridDay,listMonth", //dayGridWeek,listMonth
        // },
        headerToolbar: false, // Fullcalendar表头显示区域不显示，显示自己自定义的html头部
        // 使用内置按钮的显示文本
        buttonText: {
          today: "今天",
          month: "月",
          week: "周",
          day: "日",
          list: "日程"
        },
        // 设置日历显示事件时间头
        slotLabelFormat: {
          hour: "2-digit",
          minute: "2-digit",
          meridiem: false,
          hour12: false // 设置时间为24小时
        },
        // 视图的一些基本设置
        views: {
          // 月视图阳历转农历
          dayGridMonth: {
            height: 500,
            displayEventTime: true, //是否显示时间
            dayMaxEventRows: 4, // adjust to 6 only for timeGridWeek/timeGridDay
            // titleFormat: { year: "numeric", month: "2-digit", day: "2-digit" }, //控制日历显示的标题
            // moreLinkContent: "+ 更多", //可放在这里单独对每个视图控制显示更多的文字
            moreLinkClick: "popover",
            eventTimeFormat: {
              hour: "numeric",
              minute: "2-digit",
              meridiem: false
            },
            dayPopoverFormat: {
              month: "long",
              day: "numeric",
              year: "numeric"
            }
          },
          timeGridWeek: {},
          timeGridDay: {},
          listMonth: {}
        },

        weekends: true, //是否显示周末，设为false则不显示周六和周日
        selectable: true, //是否可以选中日历格
        editable: false, //是否可以进行（拖动、缩放）修改
        navLinks: true, //天链接
        select: this.selectDate, //选中日历格事件
        eventClick: this.handleEventClick, //选中备忘录事件
        eventsSet: this.handleEvents,
        events: this.getCalendarList, //获取数据源
        eventMouseEnter: this.eventMouseEnter, //鼠标悬浮事件
        slotEventOverlap: true, //相同时间段的多个日程视觉上是否允许重叠，默认true允许
        eventResize: this.onEventResize, // 事件时间区间调整
        eventDrop: this.onEventResize, // 事件Drag-Drop事件
        eventMouseLeave: this.eventMouseLeave // 鼠标移出事件发生的事件
      }
    };
  },
  mounted() {
    this.getTreeList();
    this.calendarApi = this.$refs.fullCalendar.getApi();

    this.title = this.calendarApi.view.title;
  },
  watch: {},
  methods: {
    getTreeList() {
      deptUserTree().then(response => {
        this.subjectList = response.data;
      });
    },
    // 将当前时间移至今日事件
    today() {
      this.getToday();
    },
    // 月视图
    month() {
      this.calendarApi.changeView("dayGridMonth");
      this.title = this.calendarApi.view.title;
    },
    // 周视图
    week() {
      this.calendarApi.changeView("timeGridWeek");
      this.title = this.calendarApi.view.title;
    },
    // 日视图
    day() {
      this.calendarApi.changeView("timeGridDay");
      this.handleTime(this.calendarApi.currentData.dateProfile.activeRange);
      this.title = this.calendarApi.view.title;
    },
    // 列表视图
    list() {
      this.calendarApi.changeView("listMonth");
      this.title = this.calendarApi.view.title;
    },
    // 鼠标划过，使用tippy插件显示tooltip
    eventMouseEnter(info) {
      // 非周列表的情况下显示悬浮提示;
      // if (info.view.type != "listWeek") {
      //   tippy(info.el, {
      //     content: info.event.title,
      //     placement: "top-start",
      //   });
      // }
    },
    // 鼠标离开
    eventMouseLeave(arg) {
      // console.log("mouseleave");
      // arg.jsEvent.preventDefault();
    },
    // 待办日程调整时间区间事件
    onEventResize(arg) {
      let newTimeStart = this.dateFormat(
        "YYYY-mm-dd HH:MM:SS",
        arg.event.startStr
      );
      let newTimeEnd = this.dateFormat("YYYY-mm-dd HH:MM:SS", arg.event.endStr);
      let params = {
        scheduleId: arg.event.id,
        scheduleTitle: arg.event.title,
        file: arg.event.extendedProps.file,
        scheduleDesc: arg.event.extendedProps.scheduleDesc,
        scheduleStatus: arg.event.extendedProps.scheduleStatus,
        urgent: arg.event.extendedProps.urgent,
        participantList: arg.event.extendedProps.participantUserList,
        startTime: newTimeStart,
        endTime: newTimeEnd
      };
      scheduleEdit(params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功！");
          // 必须加这句，不然切换视图会有显示事件数目的bug
          let calendarApi = arg.view.calendar;
          calendarApi.today();
        }
      });
    },

    // el-popover隐藏时触发，将图片地址修改为空
    async popoverPicReset(arg) {
      //   this.popoverimg = await [];
      //   let calendarApi = arg.view.calendar;
      //   calendarApi.show_pic(arg);
    },
    // el-popover显示图片功能
    async showPic(arg) {
      //   let calendarApi = arg.view.calendar;
      //   this.popoverimg = [];
      //   calendarApi.show_pic(arg);
    },

    // 自定义按钮
    customButton() {
      console.log("点击了自定义按钮");
    },
    // 今天
    getToday() {
      let calendarApi = this.$refs.fullCalendar.getApi();
      calendarApi.today();
      this.handleTime(calendarApi.currentData.dateProfile.activeRange);
      this.title = this.calendarApi.view.title;
    },
    // 上一年
    getPrevYear() {
      let calendarApi = this.$refs.fullCalendar.getApi();
      calendarApi.prevYear();
      // this.handleTime(calendarApi.currentData.dateProfile.activeRange);
      this.title = this.calendarApi.view.title;
    },
    // 下一年
    getNextYear() {
      let calendarApi = this.$refs.fullCalendar.getApi();
      calendarApi.nextYear();
      // this.handleTime(calendarApi.currentData.dateProfile.activeRange);
      this.title = this.calendarApi.view.title;
    },
    // 上一月
    getPrev() {
      let calendarApi = this.$refs.fullCalendar.getApi();
      calendarApi.prev();
      // this.handleTime(calendarApi.currentData.dateProfile.activeRange);
      this.title = this.calendarApi.view.title;
    },
    // 下一月
    getNext() {
      let calendarApi = this.$refs.fullCalendar.getApi();
      calendarApi.next();
      // this.handleTime(calendarApi.currentData.dateProfile.activeRange);
      this.title = this.calendarApi.view.title;
    },
    // 处理时间格式
    handleTime(activeRange) {
      let result = {
        startStr: activeRange.start,
        endStr: activeRange.end
      };
      this.getCalendarList();
    },
    // 获取列表信息
    getCalendarList(result) {
      // 以当前时间插入数据
      let _this = this;
      // 注意，请求的数据是数据库所有数据即可，不用考虑当前显示的时间范围，Fullcalendar会自动只显示当前日期范围的事件
      _this.calendarOptions.events = [];
      scheduleList().then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            var data = {
              id: item.scheduleId,
              title: item.scheduleTitle,
              start: item.startTime.substr(0, 10),
              end: item.endTime.substr(0, 10),
              start_time: new Date(item.startTime).getTime() / 1000,
              end_time: new Date(item.end_time).getTime() / 1000,
              //   allDay: '',
              //   className: item.className == true ? "borderGreen" : "borderOrange",
              // 非标准字段:除上述字段外，您还可以在每个事件对象中包含自己的非标准字段。FullCalendar不会修改或删除这些字段。例如，开发人员通常包括描述在回调中使用的字段，如事件呈现挂钩. 任何非标准属性都将移动到extendedProps哈希期间事件解析.
              extendedProps: {
                scheduleStatus: item.scheduleStatus,
                scheduleTitle: item.title,
                file: item.file,
                scheduleDesc: item.scheduleDesc,
                participantUserList: item.participantUserList,
                urgent: item.urgent
              },
              others: "该字段值会被自动归类到extendedProps里面",
              backgroundColor: "#409EFF",
              editable: true // 是否可以进行（拖动、缩放）修改
            };
            _this.calendarOptions.events.push(data);
          });
        }
      });
    },

    // 选择日期，填写事件
    selectDate: function(arg) {
      let startTime = this.dateFormat("YYYY-mm-dd HH:MM", arg.start);
      let endTime = this.dateFormat("YYYY-mm-dd HH:MM", arg.end);
      this.dialogVisible = true;
      this.form_edited_state = "add";
      this.dateRange = [startTime, endTime]; // 设置当前记录事件的选择的时间段
      //   let info = JSON.parse(localStorage.getItem("userInfo")); //获取当前记录人信息
      //   this.form.userName = info.username; // 设置记录人
      this.form.scheduleStatus = "0"; // 默认设置为事件未完成状态
      this.form.isAllDay = arg.allDay;
      let calendarApi = arg.view.calendar;
      calendarApi.unselect(); // 清除当前日期选择
    },
    // 表单确定按钮，提交事件
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) return;
        let calendarApi = this.$refs.fullCalendar.getApi();
        var startTime = this.dateFormat(
          "YYYY-mm-dd HH:MM:SS",
          this.dateRange[0]
        );
        let participant = [];
        this.form.participantList.forEach(v => {
          participant.push(v[v.length - 1]);
        });
        var endTime = this.dateFormat("YYYY-mm-dd HH:MM:SS", this.dateRange[1]);
        let params = {
          ...this.form,
          startTime,
          endTime,
          participant: participant.join(","),
          participantList: null
        };
        if (this.form_edited_state == "add") {
          // 添加事件的后端数据请求
          scheduleAdd(params).then(res => {
            if (res.code == 200) {
              this.$message.success("事件添加成功！");
              this.handleTime(calendarApi.currentData.dateProfile.activeRange);
            }
          });
        } else if (this.form_edited_state == "amend") {
          // 修改事件的后端数据请求
          scheduleEdit(params).then(res => {
            if (res.code == 200) {
              this.$message.success("修改成功！");
              this.handleTime(calendarApi.currentData.dateProfile.activeRange);
            }
          });
        }
        this.dialogVisible = false;
      });
    },
    // 表单取消按钮
    cancel() {
      this.form = {
        scheduleId: "",
        scheduleTitle: "",
        urgent: "",
        scheduleDesc: "",
        participant: "",
        participantList: [],
        file: ""
      };
      this.dateRange = [];
      this.filelist = [];
      id;
      this.dialogVisible = false;
    },
    // 点击待办日程事件
    handleEventClick(clickInfo) {
      this.dialogVisible = true;
      this.form_edited_state = "amend"; //修改状态
      var startTime = this.dateFormat(
        "YYYY-mm-dd HH:MM:SS",
        clickInfo.event.startStr
      );
      var endTime = this.dateFormat(
        "YYYY-mm-dd HH:MM:SS",
        clickInfo.event.endStr
      );
      // 设置打开对话框各部分的显示值
      this.form = {
        scheduleId: clickInfo.event.id,
        scheduleTitle: clickInfo.event.title,
        file: clickInfo.event.extendedProps.file,
        scheduleDesc: clickInfo.event.extendedProps.scheduleDesc,
        scheduleStatus: clickInfo.event.extendedProps.scheduleStatus,
        urgent: clickInfo.event.extendedProps.urgent,
        participantList: clickInfo.event.extendedProps.participantUserList
      };
      this.dateRange = [clickInfo.event.start, clickInfo.event.end];
    },
    // 待办日程标记已完成或改为未完成的事件
    onCheckBtnClicked(arg) {
      console.log(arg);
    },
    // 待办日程删除事件
    onRemoveBtnClicked(arg) {
      scheduleDel(arg.event.id).then(res => {
        this.calendarOptions.events = this.calendarOptions.events.filter(
          item => {
            return item.id != arg.event.id;
          }
        );
        this.$message.success("删除成功！");
      });
    },
    // 当前事件绑定，此段代码可删掉
    handleEvents(events) {
      this.currentEvents = events;
    },

    // 停止页面滚动
    stopMove() {
      const m = e => {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, false); // 禁止页面滑动
    },

    // 格式化时间 fmt是所需格式化的格式，如"YYYY-mm-dd HH:MM:SS",date是所需格式化的日期
    dateFormat(fmt, date) {
      let ret = "";
      date = new Date(date);
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    //日期格式转换
    formatTimer: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return h + ":" + m;
    },
    // 获取当前时间戳
    getCurrentTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      month = month < 10 ? "0" + month : month; // 可注释掉
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour; // 可注释掉
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
    }
  }
};
</script>
  
  <!-- 样式1，本地样式 -->
  <style lang="scss" scoped>
.calendar_matters >>> .el-dialog__body {
  height: 450px;
  overflow: auto;
}
.calendar_details >>> .el-textarea__inner {
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  height: 120px;
}
.calendar_matters >>> .el-dialog__header {
  border-radius: 5px;
  background-color: #cae1f7;
  align-content: center;
  padding: 15px;
  font-weight: bold;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: aliceblue;
}
.fc-daygrid-day-top p {
  font-size: 13px;
  color: #606266;
  margin-right: 10px;
}
.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 10px;
}
.el-main {
  padding: 8px 10px 8px 10px;
}
.userName >>> .el-input__inner {
  font-weight: bold;
  color: #000000ab;
}
.attachment >>> .el-form-item__content {
  display: flex;
}
.upload-demo >>> .el-upload-list--picture-card .el-upload-list__item {
  height: 120px;
  width: 120px;
}
.upload-demo >>> .el-upload--picture-card {
  height: 120px;
  width: 120px;
  line-height: 120px;
}
.dateRange >>> .el-range-input {
  font-weight: bold;
  color: #080808;
}
.calendar >>> .fc-header-toolbar {
  margin-bottom: 5px;
}
.calendar >>> .borderGreen {
  border-left: 5px solid #44bb08 !important;
  border-radius: 0;
  border: none;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  span {
    color: #000;
    font-weight: bold;
  }
}
.calendar >>> .borderOrange {
  border-left: 5px solid #fe9b02 !important;
  border-radius: 0;
  border: none;
  white-space: normal;
  overflow: hidden;
  span {
    color: #000;
    font-weight: bold;
  }
}
.calendar >>> .borderOrigin {
  border-radius: 0;
  border: none;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 150px;
  span {
    color: #000;
    font-weight: bold;
  }
}
.calendar >>> .fc-event-title {
  font-weight: bold;
  color: #000;
  overflow: hidden;
}
.calendar >>> .fc-event-time {
  font-weight: bold;
  color: #000;
}
.calendar >>> .fc-daygrid-event-dot {
  border: none;
}
.popover {
  .el-popover {
    max-height: 350px;
  }
}
.popover_title {
  font-weight: bold;
  margin-bottom: 3px;
}
.popover_content {
  color: #000;
  font-size: 13px;
}
.popoverShowImg {
  width: auto;
  cursor: pointer;
  >>> .el-image__inner {
    max-height: 200px;
  }
}
.link {
  color: #000;
  font-size: 12px;
  font-weight: bold;
  margin-top: 2px;
  & :hove {
    color: #66b1ff;
  }
}
.fc_btns {
  padding: 10px 12px;
}
.el-icon-search {
  line-height: 2.5;
  margin-right: 8px;
}
.fc-right {
  display: flex;
  flex: 1.5;
  justify-content: flex-end;
}
.tip-content {
  line-height: 2.2;
  margin-right: 4px;
  font-weight: 600;
}
.title {
  margin: 0px 5px;
  line-height: 1.6;
}
.calendar_matters {
  width: 100%;
}
.calendar >>> .el-popover__reference {
  display: grid;
  max-height: 150px;
  overflow: auto;
}
</style>
    <!-- 样式2 -->
    <style>
.el-popover__reference::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.el-popover__reference::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
.el-popover__reference::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: #ededed;
}
.popover .el-popover__title {
  font-weight: bold;
  margin-bottom: 5px;
  border-bottom: solid 1px;
  padding: 2px;
}
@media only screen and (max-width: 767px) {
  .fc-toolbar {
    flex-direction: column;
  }
  .fc-left {
    flex: 1 !important;
  }
  .tips {
    flex: 1 !important;
    justify-content: center;
    margin-bottom: 5px;
  }
  .fc-center {
    flex: 1 !important;
    margin: 5px 0px;
  }
  .fc-right {
    flex: 1;
    justify-content: center !important;
    margin-bottom: 5px;
  }
  .tip-content {
    line-height: 1 !important;
    margin-right: 4px;
    font-weight: 600;
  }
  .title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.9 !important;
  }
  .fc-list-table {
    word-break: break-all;
    overflow: auto;
  }
  .fc-list-event-title {
    overflow: auto;
  }
  .el-dialog {
    width: 90%;
  }
  .dateRange {
    overflow: auto;
  }
}
</style>